<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五星图</title>
    <a href="./颜色和背景首页.html">首页</a>

</head>
    <body>
        <div class="star-container">
            <div class="text">我是一个兵，爱护老百姓。</div>
        </div>
        
    <style>
        .star-container {
            width: 400px;
            height: 300px;
            background-color: #d4f1cd;
            border: 5px solid red;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image:
                url(./蓝色五角星.png),
                url(./蓝色五角星.png),
                url(./蓝色五角星.png),
                url(./蓝色五角星.png),
                url(./紫色五角星.png);
            background-repeat: no-repeat;
            background-position:
                5% 5%,
                95% 5%,
                5% 95%,
                95% 95%,
                center center;
            background-size:
                55px,
                55px,
                55px,
                55px,
                55px;
            padding: 10px;
            box-sizing: border-box;
        }

        .text {
            position: absolute;
            top: 30%;
            width: 100%;
            text-align: center;
            font-size: 20px;
            color: black;
            z-index: 1;
        }

        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
    </style>
    </body>

</html>